<!--  -->
<template>
  <div class="officeClerk-container">
    <chart-title
      title="职员营销额统计Top10"
      @click="handleMore"
    />
    <el-empty
      v-if="dataNull"
      description="暂无数据"
    />
    <template v-else>
      <div
        v-loading="loading"
        class="chart-container"
        style="width:100%;height:100%;min-height:200px;padding:20px 20px 0px;box-sizing:border-box;"
      >
        <div class="filter-container">
          <date-select
            ref="dateSelectRef"
            @dateChange="dateChange"
          />
        </div>
        <div
          id="officeClerkChart"
          style="width:100%;height:100%;min-height:200px;"
        />
      </div>
    </template>
  </div>
</template>

<script>
import {inject, onMounted, reactive, ref, toRefs} from 'vue'
// echarts
import * as echarts from 'echarts'
import ChartTitle from './chartTitle.vue'
import DateSelect from './dateSelect.vue'
import {useRouter} from 'vue-router'

export default {
  components: {
    ChartTitle,
    DateSelect,
  },
  setup(props, context) {
    const api = inject('api')
    const router = useRouter()
    var dateSelectRef = ref(null)
    var reactiveData = reactive({
      loading: true,
      dataNull: false,
      option: {
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        color: ['#6386eb'],
        // x轴样式
        xAxis: {
          type: 'category',
          axisTick: {
            alignWithLabel: true,
          },
          data: [],
          axisLine: {
            show: true,
            lineStyle: {
              color: '#A2C9AF',
              width: 1,
              type: 'solid',
            },
          },
          axisLabel: {
            textStyle: {
              color: function(value, index) {
                return '#666'
              },
            },
          },
        },
        // y轴样式
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: '#A2C9AF',
              width: 1,
              type: 'solid',
            },
          },
          axisLabel: {
            textStyle: {
              color: function(value, index) {
                return '#666'
              },
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#F0F0F0'],
              width: 1,
              type: 'dashed',
            },
          },
        },
        series: [
          {
            name: '营销额',
            type: 'bar',
            barWidth: '30%',
            label: {
              show: true,
              position: 'top',
            },
            data: [],
          },
        ],
      },
      filterData: {
        statisticsType: '5',
        startTime: null,
        endTime: null,
      },
    })
    const dateChange = (val, bool) => {
      reactiveData.filterData.startTime = val[0]
      reactiveData.filterData.endTime = val[1]
      if (bool) {
        chartInit()
      }
    }
    const handleMore = () => {
      var type = dateSelectRef.value?.dateType() || '1'
      router.push({
        path: '/statistics/sale',
        query: {
          tab: 'departmentView',
          type: type,
        },
      })
    }
    const chartInit = async() => {
      var chartDom = document.getElementById('officeClerkChart')
      chartDom.removeAttribute('_echarts_instance_')
      var myChart = echarts.init(chartDom)
      var res = await api.dashboard.GET_STATISCS_DATA(reactiveData.filterData)
      if (res.code === 0) {
        reactiveData.loading = false
        reactiveData.option.xAxis.data = res.data.headName || []
        reactiveData.option.series = res.data.returnAmount || []
        if (
          reactiveData.option.xAxis.data.length === 0 &&
          reactiveData.option.series.length === 0
        ) {
          reactiveData.dataNull = true
        }
      } else {
        reactiveData.loading = false
      }
      // 绘制图表
      myChart.setOption(reactiveData.option)
      window.onresize = function() {
        // 自适应大小
        myChart.resize()
      }
    }
    onMounted(() => {
      chartInit()
    })
    return {
      dateSelectRef,
      ...toRefs(reactiveData),
      dateChange,
      handleMore,
    }
  },
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.officeClerk-container {
  width: 100%;
  height: 100%;
  padding: 20px 0px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .chart-container {
    position: relative;
    .filter-container {
      position: absolute;
      right: 20px;
      top: -4px;
      z-index: 10;
    }
  }
}
</style>
